<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .input{
            border: 1px solid #d9d9d9;
            color: #aaa;
            outline: none;
        }
        .input-focus{
            border: 1px solid red;
            color: #888;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" class="ipt" value="邮箱/ID/手机号">
        <input type="password" class="ipt1" value="">
        <button class="btn">登录</button>
    </div>
    <script>
        var ipt = document.querySelector('.ipt');
        var ipt1 = document.querySelector('.ipt1');
        ipt.onfocus = function(){
            if(this.value == '邮箱/ID/手机号'){
                this.value = '';
               this.className = 'input-focus';
            }

        }
        ipt.onblur = function(){
            if(this.value ==''){
                this.value = '邮箱/ID/手机号';
                this.className = 'input';
            }
        }
    </script>
</body>
</html>